<script setup>
import { ref, reactive, toRef, onMounted } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
import { toRaw } from '@vue/reactivity'
import { friendWelcomeList, friendWelcomeDel } from '@/api'

import Tablelist from './list/table.vue'
import Edit from './edit/edit.vue'
import AddLable from './edit/addLable.vue'
const dialogVisible = ref(false)
const welcomeInput = ref()
const addLable = ref(null)
const loading = ref(false)
const page = ref(1)
const size = ref(10)
const listData = ref({})
onMounted(() => {
	getfriendWelcomeFun()
})
// 编辑跳转按钮
const edit = ref(null)
const showEdit = (val) => {
	console.log('1111', toRaw(val).id)
	var dataid = toRaw(val).id
	console.log(edit.value)
	edit.value.show(dataid)
	console.log('数据', toRaw(val).id)
	dialogVisible.value = true
}
// 添加标签组按钮
const goEdit = () => {
	dialogVisible.value = true
	addLable.value.show('子组件')
}

const changeSearchFun = () => {
	console.log(welcomeInput.value)
	getfriendWelcomeFun(welcomeInput.value)
}
const getfriendWelcomeFun = async (content) => {
	console.log(content)
	console.log(page.value)
	console.log(size.value)
	loading.value = true
	const res = await friendWelcomeList({
		page: page.value,
		size: size.value,
		content: content ? content : ''
	})
	console.log(res)
	if (res.status == 'success') {
		loading.value = false
		listData.value = res.data
		console.log('接口数据', listData.value)
		console.log('数据', listData.value.item)
	} else {
		loading.value = false
		ElMessage({
			showClose: true,
			message: res.msg,
			type: 'error'
		})
	}
}
const handleSizeChange = (val) => {
	size.value = val
	getfriendWelcomeFun()
	page.value = 1
}
const handleCurrentChange = (val) => {
	page.value = val
	getfriendWelcomeFun()
}
const deleteFun = async (e) => {
	loading.value = true
	console.log(e)
	const res = await friendWelcomeDel({
		id: e
	})
	console.log(res)
	if (res.status == 'success') {
		loading.value = false
		ElMessage({
			showClose: true,
			message: res.msg,
			type: 'success'
		})
		getfriendWelcomeFun()
	} else {
		loading.value = false
		ElMessage({
			showClose: true,
			message: res.msg,
			type: 'error'
		})
	}
}
const goBacks=()=>{
	getfriendWelcomeFun()
	dialogVisible.value = false
}
</script>

<template>
	<div class="CMtopStyleChildOne" v-if="!dialogVisible">
		<div>
			<el-button type="primary" @click="goEdit">新建欢迎语</el-button>
		</div>
		<div>
			<el-input
				v-model="welcomeInput"
				class="w-50 m-2"
				placeholder="请输入消息内容"
				:suffix-icon="Search"
				@input="changeSearchFun"
			/>
		</div>
	</div>

	<div v-if="!dialogVisible" class="allStyle" v-loading="loading">
		<Tablelist ref="table" @showEdit="showEdit($event, val)" :listData="listData" @deleteFun="deleteFun"></Tablelist>
		<!-- 分页 -->
		<div class="keyword-list-pagination">
			<el-pagination
				background
				v-model:currentPage="page"
				:page-size="size"
				layout="total, prev, pager, next"
				:total="listData.count"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
	</div>

	<AddLable ref="addLable" @goBack="goBacks" ></AddLable>
	<Edit ref="edit" @goBack="dialogVisible = false"></Edit>
</template>

<style scoped>
.allStyle {
}
.CMtopStyleChildOne {
	display: flex;
	margin: 20px 20px 0 20px;
	justify-content: space-between;
}
.keyword-list-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	margin: 0 20px;
	padding: 20px;

	:deep(.el-select .el-input__inner) {
		width: 60px;
		font-size: 12px;
	}

	:deep(.el-input) {
		--el-input-border-color: #0f1539;
	}
	:deep(.el-pager li) {
		background-color: #272c4d;
		margin-right: 8px;
		color: #fff;
		cursor: pointer;
	}
	:deep(.el-pagination__sizes + button.btn-prev[type='button']) {
		margin-right: 8px;
		background-color: #272c4d;
		color: #fff;
	}
	:deep(.el-pager + button.btn-next[type='button']) {
		background-color: #272c4d;
		color: #fff;
	}
	:deep(.el-pager li.is-active) {
		background: linear-gradient(225deg, #a034f7 0%, #165cfa 100%);
		border-radius: 2px;
	}
}
</style>
